<template>

	<div>
		<common-header :tittle="tittle" :showmore="true" class="head"></common-header>
		<div class="box">

			<!--左边标题-->
			<div class="left">
				<ul class="btnList">
					<li :class="{active:num===i}" v-for="(item,i) in address" :key="item.title" :id="item.id" v-text="item.title" @click="tab(i,item)">
					</li>
				</ul>
			</div>

			<!--右边请求的数据-->
			<!--<van-pull-refresh v-model="isLoading" @refresh="onRefresh">-->
				<div class="right">
					<van-loading v-if='showLoading' />
	
					<!--视频-->
	
					<div class="palyer" v-for="item in vide" v-if="listNone1">
						<h3 v-text="item && item.title"></h3>
						<div class="dplayer">
							<router-link to="/dplayer">
								<img :src="item&&item.cover_img" alt="">
							</router-link>
						</div>
						<p><span>人物</span><span>999</span></p>
					</div>
	
					<!--人物-->
					<div v-for="item in items" :key="item.id" :id="item.id" v-if="listNone2">
						<div class="latestContents">
	
							<div class="content">
								<div class="nav-l">
									<p class="unfold">{{item.description | filterFun}}</p>
									<p><span v-text="item.category_name"></span><span v-text="item.category_id"></span></p>
								</div>
								<div class="nav-r">
									<img :src="item.cover_img" alt="">
								</div>
							</div>
						</div>
	
						<!-- 三张图模块 -->
						<div class="threePic">
							<h3 v-text="item.contitle"></h3>
							<div class="imglist">
								<span>
											<img :src="item.cover_img" alt="">
										</span>
								<span>
											<img :src="item.cover_img2" alt="">
										</span>
								<span>
											<img :src="item.cover_img3" alt="">
										</span>
							</div>
							<p class="experience">
								<span v-text="item.source"></span>
								<span v-text="item.viewview"></span>
							</p>
						</div>
					</div>
	
					<!--专题-->
					<div v-for="item in special" :key="item.id" :id="item.id" v-if="listNone3">
						<div class="latestContents">
	
							<div class="content">
								<div class="nav-l">
									<p class="unfold">{{item.description | filterFun}}</p>
									<p><span v-text="item.category_name"></span><span v-text="item.category_id"></span></p>
								</div>
								<div class="nav-r">
									<img :src="item.cover_img" alt="">
								</div>
							</div>
						</div>
	
						<!-- 三张图模块 -->
						<div class="threePic">
							<h3 v-text="item.contitle"></h3>
							<div class="imglist">
								<span>
											<img :src="item.cover_img" alt="">
										</span>
								<span>
											<img :src="item.cover_img2" alt="">
										</span>
								<span>
											<img :src="item.cover_img3" alt="">
										</span>
							</div>
							<p class="experience">
								<span v-text="item.source"></span>
								<span v-text="item.viewview"></span>
							</p>
						</div>
					</div>
					<!--体验-->
					<div v-for="item in experience" :key="item.id" :id="item.id">
						<div class="latestContents">
	
							<div class="content">
								<div class="nav-l">
									<p class="unfold">{{item.description | filterFun}}</p>
									<p><span v-text="item.category_name"></span><span v-text="item.category_id"></span></p>
								</div>
								<div class="nav-r">
									<img :src="item.cover_img" alt="">
								</div>
							</div>
						</div>
	
						<!-- 三张图模块 -->
						<div class="threePic">
							<h3 v-text="item.contitle"></h3>
							<div class="imglist">
								<span>
											<img :src="item.cover_img" alt="">
										</span>
								<span>
											<img :src="item.cover_img2" alt="">
										</span>
								<span>
											<img :src="item.cover_img3" alt="">
										</span>
							</div>
							<p class="experience">
								<span v-text="item.source"></span>
								<span v-text="item.viewview"></span>
							</p>
						</div>
					</div>
	
					<span class="nodata" v-show="nodata">--暂无数据--</span>
	
				</div>
			<!--</van-pull-refresh>-->
		</div>

	</div>

</template>

<script type="text/javascript">
	import commonHeader from 'common/common-header-back'
	import { Loading } from 'vant';
	export default {
		data() {
			return {
				listNone1: false,
				listNone2: false,
				listNone3: false,
				listNone4: false,
				tittle: '',
				address: [{
						title: '视频',
						id: '1'
					},
					{
						title: '人物',
						id: '2'
					},
					{
						title: '专题',
						id: '3'
					},
					{
						title: '体验',
						id: '4'
					},

				],
				items: [],
				special: [],
				listArr: [],
				isLoading: false,
				experience: [],
				num: 0,
				page: 1,
				showLoading: false,
				nodata: false,
				vide: []
			};
		},
		mounted() {
			this.videos()
			setTimeout(() => {
				this.asyncCount = 5
			}, 1000)
		},
		//管道-字符串截取
		filters: {
			filterFun: function(value) {
				if(value && value.length > 30) {
					value = value.substring(0, 30) + '...';
				}
				return value;
			}
		},
		//获取上个页面传递的id,在下面获取数据的时候先提交id
		created() {

		},
		components: {
			commonHeader
		},
		methods: {
			tab(index, item) {
				this.showLoading = true
				this.num = index; //样式
				if(index == 0) {
					this.listNone1 = true
					this.listNone2 = false
					this.listNone3 = false
					this.listNone4 = false
					this.videos()
				} else if(index == 1) {
					this.listNone1 = false
					this.listNone2 = true
					this.listNone3 = false
					this.listNone4 = false
					this.profiles()
				} else if(index == 2) {
					this.listNone1 = false
					this.listNone2 = false
					this.listNone3 = true
					this.listNone4 = false
					this.subjects()
				} else if(index == 3) {
					this.listNone1 = false
					this.listNone2 = false
					this.listNone3 = false
					this.listNone4 = true
					this.tastes()
				}

			},

			//视频
	
			
			videos: function(id) {
				this.$axios.get('API/v1/homes/information').then((res) => {
					if(res) {
//						console.log(JSON.stringify(res))
						this.vide = res.data.data.items
						console.log(this.vide.title)
					} else {

					}

				})
			},

			//人物
			profiles: function(id) {
				this.$axios.get('API/v1/profiles').then((res) => {
					if(res) {
						console.log(JSON.stringify(res))
						this.items = res.data.data.items
					} else {

					}

				})
			},

			//专题
			subjects: function(id) {

				this.$axios.get('API/v1/subjects').then((res) => {
					if(res) {
						console.log(JSON.stringify(res))
						this.special = res.data.data.items
					} else {

					}

				})
			},

			//体验
			tastes: function(id) {
				this.$axios.get('API/v1/tastes').then((res) => {
					if(res) {
						console.log(JSON.stringify(res))
						this.experience = res.data.data.items
					} else {

					}

				})
			},

			onRefresh() {
				setTimeout(() => {
					this.items = []
					this.special = []
					this.experience = []

					this.$toast('刷新成功');
					this.isLoading = false;

				}, 500);
			}
		}

	}
</script>
<style scoped lang="less">
	@import "~styles/index.less";
	@import "~styles/variable.less";
	html,
	body,
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	
	.btnList li.active {
		border-bottom: 1px solid @base-blue-color;
		background: @base-list-black-color;
		color: @base-blue-color;
	}
	
	.box {
		background: #fff;
		height: 100%;
		margin: 48px 0 0px 0;
		.left {
			width: calc(100% - 50px);
			top: 0;
			right: 0;
			position: fixed;
			z-index: 999;
			line-height: 48px;
			height: 48px;
			ul {
				width: 100%;
				height: 100%;
				overflow: hidden;
				display: flex;
				li {
					font-size: 15px;
					flex: 1;
					text-align: center;
					&:nth-child(1) {}
					span {
						display: block;
						text-align: center;
					}
				}
			}
		}
		.right {
			position: relative;
			width: calc(100% - 30px);
			margin: 10px 15px 0 15px;
			.nodata {
				color: #16B0B7;
				position: absolute;
				top: 20%;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
			ul {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				li {
					font-size: 12px;
					width: 120px;
					margin-bottom: 15px;
					&:nth-child(1) {
						position: relative;
						display: block;
						width: 100%;
						justify-content: flex-start;
						display: flex;
						height: 80px;
						&>div {
							margin-left: 10px;
							width: calc(100% - 130px);
							em {
								display: block !important;
								margin-top: 10px;
								position: relative;
								&:after {
									content: '>';
									position: absolute;
									font-weight: bold;
									right: 60px;
									top: 3px;
									bottom: 0;
									margin: auto;
								}
							}
						}
						&:after {
							content: 'HOT 1';
							position: absolute;
							width: 45px;
							height: 20px;
							background: red;
							top: 0px;
							left: 0px;
							text-align: center;
							line-height: 20px;
							border-bottom-right-radius: 10px;
							border-top-right-radius: 10px;
							color: #fff;
						}
					}
					&:nth-child(2) {
						position: relative;
						&:after {
							content: 'HOT 2';
							position: absolute;
							width: 45px;
							height: 20px;
							background: red;
							top: 0px;
							left: 0px;
							text-align: center;
							line-height: 20px;
							border-bottom-right-radius: 10px;
							border-top-right-radius: 10px;
							color: #fff;
						}
					}
					&:nth-child(3) {
						position: relative;
						&:after {
							content: 'HOT 3';
							position: absolute;
							width: 45px;
							height: 20px;
							background: red;
							top: 0px;
							left: 0px;
							text-align: center;
							line-height: 20px;
							border-bottom-right-radius: 10px;
							border-top-right-radius: 10px;
							color: #fff;
						}
					}
					span {
						display: block;
						width: 120px;
						height: 80px;
						border-radius: 5px;
						img {
							width: 100%;
							height: 100%;
							border-radius: 5px;
						}
					}
					div {
						text-align: left;
						h3 {
							font-size: 15px;
							font-weight: bold;
							color: @base-black-color;
							margin-top: 10px;
						}
						p {
							font-weight: 400;
							color: rgba(153, 153, 153, 1);
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							width: 100%;
							margin-top: 10px;
						}
						em {
							display: block;
							font-weight: 400;
							color: rgba(204, 204, 204, 1);
						}
					}
				}
			}
		}
	}
	
	
	
	// 人物
	.latestContents {
		h3 {
			font-size: 15px;
			font-weight: bold;
			width: 100%;
			text-align: left;
			padding: 20px 0 20px 10px;
			position: relative;
		}
		.content {
			font-size: 14px;
			padding: 10px 10px;
			display: flex;
			border-bottom: 1px solid @border-color;
			justify-content: space-between;
			.nav-l {
				text-align: left;
				.unfold {
					height: 50px;
					overflow: hidden;
				}
				p {
					&:first-child {
						line-height: 25px;
					}
					&:last-child {
						margin-top: 6px;
						font-size: 12px;
						display: flex;
						justify-content: space-between;
						color: #CCCCCC;
						span {
							&:last-child {
								position: relative;
								&:after {
									position: absolute;
									content: '';
									width: 16px;
									height: 16px;
									left: -20px;
									top: -1px;
									background: url(../../../..//assets/imgs/eye.svg);
									background-size: 100% 100%;
									vertical-align: middle;
								}
							}
						}
					}
				}
			}
			.nav-r {
				margin-left: 25px;
				height: 75px;
				border-radius: 5px;
				img {
					width: 111px;
					height: 73px;
					border-radius: 5px;
				}
			}
		}
	}
	
	// 三张图模块
	.threePic {
		background: #ffffff;
		width: calc(100% - 10px);
		border-bottom: 1px solid @border-color;
		padding: 0 5px;
		h3 {
			font-size: 14px;
			font-weight: bold;
			width: 100%;
			text-align: left;
			padding: 20px 0 20px 10px;
			background: #ffffff;
		}
		.imglist {
			background: #ffffff;
			height: 75px;
			width: 100%;
			display: flex;
			flex-flow: row nowrap;
			justify-content: flex-end;
			span {
				margin: 0 5px;
				text-align: center;
				width: 100%;
				display: inline-block;
				display: inline-block;
				img {
					width: 100%;
					height: 100%;
					border-radius: 5px;
				}
			}
		}
		.experience {
			margin: 18px 10px;
			display: flex;
			justify-content: space-between;
			color: #cccccc;
			span {
				&:last-child {
					position: relative;
					top: 2px;
					&:after {
						position: absolute;
						content: '';
						width: 16px;
						height: 16px;
						left: -20px;
						top: -1px;
						background: url(../../../..//assets/imgs/eye.svg);
						background-size: 100% 100%;
						vertical-align: middle;
					}
				}
			}
		}
	}
	
	
	
	.palyer {
		width: 100%;
		line-height: 23px;
		h3 {
			font-size: 14px;
			font-weight: bold;
			width: 100%;
			text-align: left;
			padding: 0px 0 15px 0px;
			background: #ffffff;
			color: #333333;
		}
		.dplayer {
			width: 100%;
			height: 150px;
			position: relative;
			img {
				border-radius: 5px;
				width: 100%;
				height: 100%;
			}
			&:after {
				position: absolute;
				z-index: 998;
				content: '';
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 30px;
				height: 30px;
				background: url(../../../../assets/imgs/home/details_video@2x.png);
				background-size: 100% 100%;
			}
		}
		p {
			display: flex;
			justify-content: space-between;
			width: 100%;
			color: #CCCCCC;
			margin-top: 18px;
			span {
				&:last-child {
					position: relative;
					&:after {
						position: absolute;
						content: '';
						width: 16px;
						height: 16px;
						left: -20px;
						top: -1px;
						background: url(../../../../assets/imgs/eye.svg);
						background-size: 100% 100%;
						vertical-align: middle;
					}
				}
			}
		}
	}
	
</style>